<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link th:href="@{/css/semantic.min.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script th:src="@{/js/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/js/semantic.min.js}">
    </script>
</head>
<body>
<div class="ui container" >
    <div class="ui segment">
        <form name="examform" class="layui-form" method="post" enctype="multipart/form-data" th:action="@{/stu/exam/process/submit}">
            <h1 class="ui black header" th:text="'试卷：'+${exam.getName()}"></h1>
            <h2 class="ui black header" th:text="'老师姓名：'+${exam.getUsername()}"></h2>
            <h3 class="ui red  header">距离考试结束：<span id="sp4"></span></h3>
            <h3 class="ui red dividing header" th:text="'最迟提交时间：'+${#dates.format(exam.getDeadline(),'yyyy年MM月dd日 HH:mm')}"></h3>
            <h4 class="ui red header">单选题：1分/题&nbsp;&nbsp;多选题：2分/题&nbsp;&nbsp;问答题：5分/题&nbsp;&nbsp;图文题：5分/题</h4>
            <input type="hidden" th:value="${result_id}" name="result_id">
            <div class="inline  fields" th:each="test,iterStat:${contents}">
                <label  class="ui black header" th:text="'第'+${iterStat.index+1}+'问:'+${test.subject}"></label>
                <br>
                <div class="layui-form-item" th:if="${test.getType_id()==1}">
                    <div class="layui-input-block">
                        <input type="radio"  th:name="${test.id}" value="A" checked="checked" th:title="'A:'+${test.answer_a}">
                    </div>
                </div>
                <div class="layui-form-item" th:if="${test.getType_id()==1}">
                    <div class="layui-input-block">
                        <input type="radio"  th:name="${test.id}" value="B"  th:title="'B:'+${test.answer_b}">
                    </div>
                </div>
                <div class="layui-form-item" th:if="${test.getType_id()==1}">
                    <div class="layui-input-block">
                        <input type="radio"  th:name="${test.id}" value="C"  th:title="'C:'+${test.answer_c}">
                    </div>
                </div>
                <div class="layui-form-item" th:if="${test.getType_id()==1}">
                    <div class="layui-input-block">
                        <input type="radio"  th:name="${test.id}" value="D"  th:title="'D:'+${test.answer_d}">
                    </div>
                </div>
                <div class="layui-form-item" th:if="${test.getType_id()==2}">
                    <div class="layui-input-block">
                        <label  class="ui label"   th:text="'A:'+${test.getAnswer_a()}"/>
                    </div>
                </div>
                <div class="layui-form-item" th:if="${test.getType_id()==2}">
                    <div class="layui-input-block">
                        <label  class="ui label"   th:text="'B:'+${test.getAnswer_b()}"/>
                    </div>
                </div>
                <div class="layui-form-item" th:if="${test.getType_id()==2}">
                    <div class="layui-input-block">
                        <label  class="ui label"   th:text="'C:'+${test.getAnswer_c()}"/>
                    </div>
                </div>
                <div class="layui-form-item" th:if="${test.getType_id()==2}">
                    <div class="layui-input-block">
                        <label  class="ui label"   th:text="'D:'+${test.getAnswer_d()}"/>
                    </div>
                </div>
                <div class="layui-form-item" th:if="${test.type_id==2}">
                    <label class="layui-form-label">回答：</label>
                    <div class="layui-input-block">
                        <select th:name="${test.id}" lay-verify="required" lay-search="">
                            <option value="A,B">A,B</option>
                            <option value="A,C">A,C</option>
                            <option value="A,D">A,D</option>
                            <option value="B,C">B,C</option>
                            <option value="B,D">B,D</option>
                            <option value="C,D">C,D</option>
                            <option value="A,B,C">A,B,C</option>
                            <option value="A,B,D">A,B,D</option>
                            <option value="A,C,D">A,C,D</option>
                            <option value="B,C,D">B,C,D</option>
                            <option value="A,B,C,D">A,B,C,D</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" th:if="${test.type_id==4}">
                    <label class="layui-form-label">附图[[${iterStat.index+1}]]</label>
                    <div class="layui-input-block">
                        <img class="ui huge image" th:src="@{'https://wk2020.oss-cn-shenzhen.aliyuncs.com/'+${test.getImage()}}">
                    </div>
                </div>

                <div class="layui-form-item layui-form-text" th:if="${test.type_id==3||test.type_id==4}">
                    <label class="layui-form-label">回答</label>
                    <div class="layui-input-block">
                                <textarea  th:name="${test.id}"   class="layui-textarea" placeholder="请完成答案">
                                </textarea></div>
                </div>

            </div>

            <br>
            <br>
            <br>
            <button class="ui  blue labeled submit icon button" type="submit" id="submi">
                <i class="send icon" > </i>
                提交
            </button>
        </form>
    </div>
</div>
</body>
<script>
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

    //计时器
    function show_time(totalTime){
        if(totalTime==0){
            alert("考试时间结束！系统将会自动提交！");
            $("form[name='examform']").submit();
        }
        var remainTime=totalTime-1;
        var min = remainTime/60;
        min=parseInt(min);
        var s=remainTime%60;
        if(s<10){
            s="0"+s;
        }
        var str="0"+min+":"+s;
        $("#sp4").text(str);
        setTimeout("show_time("+remainTime+")",1000);
    }

    $(function(){
        show_time([[${deadline_time}]]);
        $("#submi").click(function(){
            var flag=confirm("确定提交吗？考试只能完成一次哦");
            if(flag){
                return true;
            }else{
                return false;
            }
        });
    });
</script>
</html>